<template>
<div>
  <head v-if="isWeb=='web'" title="Payment details"></head>
  <div class="wrapper">
    <div class="block">
      <text class="symbol">AU$</text>
      <text class="money">{{amount}}</text>
    </div>
    <div class="paytypeBox">
      <!-- <div class="row" @click="paytype='visa'">
				<image class="visa" src="root:img/visa.png" />
				<text class="center">Visa</text>
				<div class="right">
					<text class="iconfont active" v-if="paytype=='visa'">&#xe60d;</text>
					<text class="iconfont" v-else>&#xe67f;</text>
				</div>
			</div>
			<div class="row" @click="paytype='union'">
				<image class="union" src="root:img/union.png" />
				<text class="center">Mastercard</text>
				<div class="right">
					<text class="iconfont active" v-if="paytype=='union'">&#xe60d;</text>
					<text class="iconfont" v-else>&#xe67f;</text>
				</div>
			</div>
			<div class="addCard" v-if="paytype=='union'">
				<text class="addTit">Add credit card</text>
				<input class="inputCard" placeholder="Name"  />
				<input class="inputCard bt0" placeholder="Card number"  />
				<text class="addTit">Card expiry date</text>
				<div class="inputBox">
					<input class="boxItem"  type="date" /> 
					<input class="boxItem"  /> 
				</div>
				<text class="btn">Add credit card</text>
			</div>
      -->
    </div>
    <div class="paytypeBox">
      <!-- <div class="row" @click="paytype='wechat'">
				<image class="left" src="root:img/wechat.png" />
				<text class="center">WeChat pay</text>
				<div class="right">
					<text class="iconfont active" v-if="paytype=='wechat'">&#xe60d;</text>
					<text class="iconfont" v-else>&#xe67f;</text>
				</div>
      </div>-->

      <div
        class="row"
        @click="paytype='paypal';actionUrl='https://www.empirise.com/mall/public/index.php/web/paypal/get_code'"
      >
        <image class="paypal" src="root:img/paypal.png" />
        <text class="center">Paypal</text>
        <div class="right">
          <text class="iconfont active" v-if="paytype=='paypal' ">&#xe60d;</text>
          <text class="iconfont" v-else>&#xe67f;</text>
        </div>
      </div>
      <div
        class="row"
        @click="paytype='square';actionUrl='https://www.empirise.com/mall/public/php_payment/index.php'"
      >
        <image class="left" src="root:img/timg.jpg" />
        <text class="center">Square</text>
        <div class="right">
          <text class="iconfont active" v-if="paytype=='square'">&#xe60d;</text>
          <text class="iconfont" v-else>&#xe67f;</text>
        </div>
      </div>
    </div>
    <form id="formID" method="POST" :action="actionUrl">
      <input name="users_id" :value="userId" />
      <input name="total_order_id" :value="total_order_id" />
      <input name="pay_price" :value="amount" />
      <input
        name="return_url"
        :value="'https://www.empirise.com/web/index.html#/app/pay/success.js?id='+total_order_id"
      />
    </form>

    <div class="save" @click="save">
      <text class="btn">Confirm</text>
    </div>
    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
      <floading class="indicator" color="#303030"></floading>
    </div>
  </div>
</div>
</template>

<script>
import { paypal } from "../../mixin/ajax";
import asCore from "../../mixin/core";

export default {
  data() {
    return {
      isWeb: "web",
      amount: 0,
      paytype: "paypal", //支付类型
      total_order_id: "",
      actionUrl: "https://www.empirise.com/mall/public/index.php/web/paypal/get_code",
      userId: ""
    };
  },
  created(e) {
    this.isWeb = "web";
    asCore.getBsessionid(userId => {
      if (userId) {
        this.userId = userId;
      }
    });
  },
  methods: {
    onLoad(param) {
      if (param && param.param) {
        return false;
      }
      if (param && param.id) {
        this.total_order_id = param.id;
        this.amount = param.amount;
      }
      if (param && param.userId) {
        this.userId = param.userId;
      }
      if (param && param.isWeb) {
        this.isWeb = param.isWeb;
      }
    },
    save() {
      let that = this;

      document.getElementById("formID").submit();
      // var stream = weex.requireModule("stream");
      // let param = {
      //   users_id:this.userId,
      //   total_order_id:this.total_order_id,
      //   pay_price:this.amount,
      //   return_url:'https://www.empirise.com/web/index.html#/app/pay/success.js?id='+this.total_order_id
      // };
      //  this.isLoading = true;
      // stream.fetch(
      //   {
      //     method: "POST",
      //     url: this.actionUrl,
      //     type: "json",
      //     headers: {
      //       "Content-Type": "application/x-www-form-urlencoded;charset=utf-8;"
      //     },
      //     body: asCore.toParams(param)
      //   },
      //   ret => {
      //      this.isLoading = false;
      //     if (ret.ok) { 
      //       if(ret.data.code==200){

      //       }else{
      //
      //       }
      //     }
      //   }
      // );
      //   paypal(
      //     {
      //       users_id: this.userId,
      //       total_order_id: this.total_order_id,
      //       return_url:
      //         "http://192.168.1.221:8081/index.html#/app/pay/success.js?id=317"
      //     },
      //     (res, flag) => {
      //       
      //     }
      //   );
      //   this.push("root:app/pay/success.js");
    }
  }
};
</script>

<style scoped>
.iconfont {
  font-family: iconfont;
  font-size: 34px;
}

.iconfont {
  color: #ba8733;
}

.wrapper {
  background-color: #f5f5f5;
}

.block {
  width: 750px;
  height: 120px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.symbol {
  color: #ec414d;
  font-size: 24px;
}

.money {
  color: #ec414d;
  font-size: 38px;
  font-weight: 600;
}

.addCard {
  width: 686px;
  padding: 0 0 40px;
}

.addTit {
  color: #666666;
  margin: 20px 0;
  font-size: 26px;
}

.inputCard {
  border-width: 1px;
  border-style: solid;
  border-color: #d8d8d8;
  width: 686px;
  height: 100px;
  padding-left: 32px;
}

.inputBox {
  width: 686px;
  margin-bottom: 40px;
  flex-direction: row;
  justify-content: space-between;
}

.boxItem {
  border-width: 1px;
  border-style: solid;
  border-color: #d8d8d8;
  width: 310px;
  height: 100px;
}

.bt0 {
  border-top-width: 0;
}

.paytypeBox {
  margin-top: 20px;
  background-color: #fff;
  padding: 0 20px;
  align-items: center;
}

.row {
  width: 710px;
  height: 95px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.bb {
  border-bottom-color: #e6e6e6;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
#formID {
  visibility: hidden;
  display: none;
}
.left {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  margin-left: 10px;
}

.paypal {
  width: 61px;
  height: 16px;
  margin-right: 25px;
  margin-left: 5px;
}

.visa {
  width: 60px;
  height: 18.3px;
  margin-right: 25px;
  margin-left: 5px;
}

.union {
  width: 51px;
  height: 32px;
  margin-right: 30px;
  margin-left: 10px;
}

.center {
  flex: 1;
  font-size: 30px;
  color: #333333;
}

.right {
  width: 100px;
  justify-content: flex-end;
  flex-direction: row;
}

.save {
  position: fixed;
  bottom: 0;
  width: 750px;
  height: 120px;
  justify-content: center;
  align-items: center;
}

.btn {
  width: 690px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.btn:active {
  background-color: #000;
}
</style>
